<template>
    <div>
    <div class="taglist">
        <div class="playlist_tag_content">
            <el-carousel indicator-position="outside" height="234px" :autoplay="false" >
               <el-carousel-item class="container">
                <div  class="playlist_tag_content">
                    <div class="playlist_item">
                        <h3  class="playlist_item_tit">热门</h3>
                        <ul class="playlist_item_ul">
                            <li class="playlist_tag_itembox">
                                <a>官方歌单</a>
                            </li>
                            <li class="playlist_tag_itembox">
                                <a>AI歌单</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>免费热歌</a>

                            </li>
                           
                        </ul>
                    </div> 
                    <div class="playlist_item">
                        <h3  class="playlist_item_tit">主题</h3>
                        <ul class="playlist_item_ul">
                            <li class="playlist_tag_itembox">
                                <a>音乐人在线</a>
                            </li>
                            <li class="playlist_tag_itembox">
                                <a>达人心选</a>

                            </li>
                            <br>
                            <li class="playlist_tag_itembox">
                                <a>KTV金曲</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>Chill Vibes</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>网络歌曲</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>现场音乐</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>背景音乐</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>经典老歌</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>更多</a>
                            </li>
                        </ul>
                    </div> 
                    <div class="playlist_item">
                        <h3  class="playlist_item_tit">场景</h3>
                        <ul class="playlist_item_ul">
                            <li class="playlist_tag_itembox">
                                <a>夜店</a>
                            </li>
                            <li class="playlist_tag_itembox">
                                <a>学习工作</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>咖啡馆</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>运动</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>睡前</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>旅行</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>跳舞</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>派对</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>更多</a>
                            </li>
                        </ul>
                    </div> 
                    <div class="playlist_item">
                        <h3  class="playlist_item_tit">心情</h3>
                        <ul class="playlist_item_ul">
                            <li class="playlist_tag_itembox">
                                <a>伤感</a>
                            </li>
                            <li class="playlist_tag_itembox">
                                <a>快乐</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>安静</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>励志</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>治愈</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>思念</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>甜蜜</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>寂寞</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>宣泄</a>
                            </li>
                        </ul>
                    </div> 
                    <div class="playlist_item">
                        <h3  class="playlist_item_tit">年代</h3>
                        <ul class="playlist_item_ul">
                            <li class="playlist_tag_itembox">
                                <a>00年代</a>
                            </li>
                            <li class="playlist_tag_itembox">
                                <a>90年代</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>80年代</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>70年代</a>

                            </li>
                        </ul>
                    </div> 
                </div>
               </el-carousel-item>
               <el-carousel-item class="container">
                <div  class="playlist_tag_content">
                    <div class="playlist_item">
                        <h3  class="playlist_item_tit">流派</h3>
                        <ul class="playlist_item_ul">
                            <li class="playlist_tag_itembox">
                                <a>流行</a>
                            </li>
                            <li class="playlist_tag_itembox">
                                <a>电子</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>轻音乐</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>民谣</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>说唱</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>摇滚</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>爵士</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>R&B</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>更多</a>

                            </li>
                           
                        </ul>
                    </div> 
                    <div class="playlist_item">
                        <h3  class="playlist_item_tit">语种</h3>
                        <ul class="playlist_item_ul">
                            <li class="playlist_tag_itembox">
                                <a>英语</a>
                            </li>
                            <li class="playlist_tag_itembox">
                                <a>粤语</a>

                            </li>
                            <br>
                            <li class="playlist_tag_itembox">
                                <a>韩语</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>日语</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>国语</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>更多</a>

                            </li>
                            
                        </ul>
                    </div> 
                    <div class="playlist_item">
                        <h3  class="playlist_item_tit">热门</h3>
                        <ul class="playlist_item_ul">
                            <li class="playlist_tag_itembox">
                                <a>官方歌单</a>
                            </li>
                            <li class="playlist_tag_itembox">
                                <a>AI歌单</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>免费热歌</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>私藏</a>

                            </li>
                            
                        </ul>
                    </div> 
                    <div class="playlist_item">
                        <h3  class="playlist_item_tit">主题</h3>
                        <ul class="playlist_item_ul">
                            <li class="playlist_tag_itembox">
                                <a>音乐人在听</a>
                            </li>
                            <li class="playlist_tag_itembox">
                                <a>达人心选</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>KTV金曲</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>Chill vibes</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>网络歌曲</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>现场音乐</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>背景音乐</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>经典老歌</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>更多</a>
                            </li>
                        </ul>
                    </div> 
                    <div class="playlist_item">
                        <h3  class="playlist_item_tit">场景</h3>
                        <ul class="playlist_item_ul">
                            <li class="playlist_tag_itembox">
                                <a>夜店</a>
                            </li>
                            <li class="playlist_tag_itembox">
                                <a>学习工作</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>运动</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>睡前</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>跳舞</a>

                            </li>
                            <li class="playlist_tag_itembox">
                                <a>派对</a>

                            </li>
                        </ul>
                    </div> 
                </div>
               </el-carousel-item>
            </el-carousel>
        </div>
        <div style="overflow: auto;">
        <ItemCard  :PathFolder="PathFolder" :Nums="Shownums" :need="true"> </ItemCard>
        </div>
    </div>
    </div>
</template>
<script>
import ItemCard from '../ItemCard.vue';
const PathFolder = require.context('@/assets/GedanPage', false, /\.(png|jpg|jpeg|gif|webp)$/);//读取图片,返回一个函数

    export default{
        name:'GeDanPage',
        data(){
            return{
                isHighlighted:false,
                PathFolder,
                Shownums:20,

            }
        },
        components:{
            ItemCard
        }
     

    }
</script>
<style scoped>

.section_inner{
    width: 1250px;
    margin: 0 auto;
}

.playlist_other{
    text-decoration: none;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 22px;
    font-size:14px;
}
.playlist_author a{
    text-decoration: none;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 22px;
    font-size:14px;
}
.playlist_tit span a{
    text-decoration: none;
    font-size: 14px;
}
.playlist_tit{
    margin: 0;
    padding: 0;
}
.playlist_cover{
    position: relative;
    display: block;
    overflow: hidden;
    margin-bottom: 15px;
}
.playlist_item_box{
    width: 230px;
    margin-right: 20px;
}
.section_inner_container{
    border: none;
    width: 20%;
    min-width: 230px;
    padding-bottom: 44px;
    overflow: hidden;
    font-size: 14px;
    vertical-align: top;
    display: inline-block;
    white-space: nowrap;
}
.infinite-list{
    padding:0;
    width: 100%;
    height: 1007.58px;
   
    overflow: hidden;
}
.tag_item{
    
    cursor: pointer;
    /* float:left; */
    padding:0 8px;
    margin:0 24px 15px 0;
    text-decoration:none;
}
 .tag_list_p{
    width: 1200px;
    position:relative;
    margin:0 auto;
 }
 .tag_list_c{
    position:relative;
    height:auto;
    clear:both;
    overflow:hidden;
    line-height:26px;
    padding-left:65px;
 }
 .album_list{

    /* width:1200px;
    min-width:900px; */
    height: 1007.58px;
    margin:0 auto;
    padding:35px 0 0;
    position: relative;
 }
/*fengexian*/
.el-carousel__button{
    width: 8px !important;
    height: 8px !important;
    border-radius:12px !important;
}
.container{
    width:1200px;
}   
    .playlist_item_ul{
        height:116px ;
    }
    .playlist_item{
        /* white-space: nowrap; */
        display: inline-block;
        vertical-align: top;
        /* background-color:grey; */
        width:195px;
        height:116px;
        font-family: Tahoma,Arial,微软雅黑,sans-serif,9;
        font-size:14px;
    }
    .playlist_item_ul{
        text-align: left;
        margin:0px;
        padding:0px;
    }
    .playlist_item_tit{
        margin:0px;
       text-align: left;
    }
    .playlist_tag_itembox{
        cursor: pointer;
        text-align: left;
        white-space: nowrap;
        display:inline-block;
    }
    .playlist_tag_itembox:hover a{
        color: #31c27c  ;
    }
    .playlist_tag_itembox a{
        
        display: inline-block;
        padding: 0 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 68px;
    }
    .playlist_tag_content{
       width:1200px;
       margin:0 auto;
       text-align: center;
    }
    .container{
        margin:0 auto;
    }
</style>